<template>
	<!-- 交易订单 -->
	<div class="order">
		<el-form :model="searchForm" inline class="smallwidth searchForm-style">
			<el-form-item label="选择时段:">
				<el-date-picker
					v-model="searchForm.playDate"
					type="datetimerange"
					range-separator="至"
					start-placeholder="开始日期"
					end-placeholder="结束日期"
					:default-time="['00:00:00', '23:59:59']"
					value-format="yyyy-MM-dd HH:mm:ss"
					:picker-options="pickerOptions"
				></el-date-picker>
			</el-form-item>
			<el-form-item><el-input style="width: 720rpx" placeholder="条形码/商品单号" v-model="searchForm.barcode"  prefix-icon="el-icon-search"></el-input></el-form-item>
			<el-form-item class="searchButtonStyle"><el-button type="primary">查询</el-button></el-form-item>
		</el-form>
		<div class="order-container">
			<div class="order-header table-layout table-layout-title bold">
				<span>商品条码</span>
				<span>商品名称</span>
				<span>规格</span>
				<span>单价</span>
				<span>数量</span>
				<span>小计</span>
				<span>订单状态</span>
				<span>支付状态</span>
			</div>
			<div class="content">
				<div class="order-body" v-for="(item, idx) in optionsList" :key="idx">
					<div class="order-item-header sd-bg-primary">
						<div class="order-item-header-messages">
							<span>
								<b class="user_unset">订单号：</b>
								<b class="user_unset">{{item.orderId}}</b>
								<el-button size="mini" class="left-margin" @tap="copyText(item.orderId)">复制</el-button>
							</span>
							<span class="user_unset">
								<b class="user_unset">销售渠道：</b>
								<b class="user_unset">{{item.saleChannel}}</b>
							</span>
							<span class="user_unset">
								<b class="user_unset">总金额：</b>
								<b class="user_unset"><a>{{item.price}}元</a></b>
							</span>
							<span class="user_unset">下单时间：2020-02-09 09:08:09/admin（管理员）</span>
						</div>
						<div class="order-item-header-buttons">
							<el-button size="mini">支付</el-button>
							<el-button size="mini">详情</el-button>
						</div>
					</div>
					<!-- 需要折叠的地方 -->
					<div class="order-item-body">
						<div class="table-layout">
							<span>21837981729</span>
							<span>农夫山泉</span>
							<span>200ml</span>
							<span>¥3.00</span>
							<span>1</span>
							<span>¥3.00</span>
							<span>正常</span>
							<span>已支付</span>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="pages">
			<pagination
				layout="total, sizes, prev, pager, next, jumper"
				:page-sizes="pageSizes"
				:page.sync="pageParams.page"
				:limit.sync="pageParams.pageSize"
				:total="pageParams.total"
			></pagination>
		</div>
	</div>
</template>

<script>
import Pagination from '@/components/Pagination';
export default {
	name: 'Order',
	components: {
		Pagination //分页
	},
	data() {
		return {
			searchForm: {
				playDate:[],
				barcode:'',
			},
			pickerOptions: {
				shortcuts: [
					{
						text: '当日',
						onClick(picker) {
							const arr = setTimeRange(1);
							picker.$emit('pick', arr);
						}
					},
					{
						text: '本周',
						onClick(picker) {
							const arr = setTimeRange(3);
							picker.$emit('pick', arr);
						}
					},
					{
						text: '本月',
						onClick(picker) {
							const arr = setTimeRange(5);
							picker.$emit('pick', arr);
						}
					},
					{
						text: '上周',
						onClick(picker) {
							const arr = setTimeRange(4);
							picker.$emit('pick', arr);
						}
					},
					{
						text: '上月',
						onClick(picker) {
							const arr = setTimeRange(6);
							picker.$emit('pick', arr);
						}
					},
					{
						text: '最近一个月',
						onClick(picker) {
							const end = new Date();
							const start = new Date();
							start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
							picker.$emit('pick', [start, end]);
						}
					},
					{
						text: '最近三个月',
						onClick(picker) {
							const end = new Date();
							const start = new Date();
							start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
							picker.$emit('pick', [start, end]);
						}
					}
				]
			},
			pageSizes: [3, 30, 50, 100],
			pageParams: {
				page: 1,
				pageSize: 5,
				total: 3
			},
			// text: '88888888888',
			optionsList:[
				{
					orderId:'12893904084013',
					saleChannel:'POS收银机',
					price:'300',
				},
				{
					orderId:'12893904084056',
					saleChannel:'POS收银机',
					price:'300',
				},
				{
					orderId:'12893904084089',
					saleChannel:'POS收银机',
					price:'300',
				},
				{
					orderId:'12893904084000',
					saleChannel:'POS收银机',
					price:'300',
				},{
					orderId:'12893904084000',
					saleChannel:'POS收银机',
					price:'300',
				},{
					orderId:'12893904084000',
					saleChannel:'POS收银机',
					price:'300',
				},{
					orderId:'12893904084000',
					saleChannel:'POS收银机',
					price:'300',
				},{
					orderId:'12893904084000',
					saleChannel:'POS收银机',
					price:'300',
				},{
					orderId:'12893904084000',
					saleChannel:'POS收银机',
					price:'300',
				},{
					orderId:'12893904084000',
					saleChannel:'POS收银机',
					price:'300',
				},{
					orderId:'12893904084000',
					saleChannel:'POS收银机',
					price:'300',
				},
			]
		};
	},
	onLoad() {},
	methods: {
		copyText(n) {
			let orderId = n
			// #ifdef H5
			this.$copyText(orderId).then(res => {
				uni.showToast({
					title: '复制成功'
				});
			});
			// #endif
			// #ifndef H5
			uni.setClipboardData({
				data: orderId,
				success: () => {
					uni.showToast({
						title: '复制成功'
					});
				}
			});
			// #endif
		}
	}
};
</script>

<style lang="scss" scoped>
.sd-bg-primary {
	background-color: $uni-color-primary;
}
.buttonStyle {
}
// 新增样式
.order {
	background: #fff;
	height: calc(100vh - 260rpx);
	border-radius: 12rpx;
	padding: 40rpx;
	.searchForm-style {
		margin-bottom: 60rpx;
		display: flex;
		// justify-content: center;
		align-items: center;
		::v-deep .el-date-editor {
			height: 80rpx;
			transform: translate(0rpx);
		}
	}
	.order-container {
		.left-margin {
			margin-left: 20rpx;
		}
		.content {
			// height: 760rpx;
			//5/27zjc改
			max-height: calc(100vh - 700rpx);;
			overflow: auto;
		}
	}
	// 分页
	.pages {
		padding-top: 10px;
		letter-spacing: 2.28rpx;
		::v-deep .btn-prev,
		::v-deep .btn-next {
			width: 56rpx;
			height: 56rpx;
			border: 0;
		}
	}
}
// ------------------
::v-deep .el-date-editor {
	height: 72rpx;
	// vertical-align: middle;
	transform: translateY(2rpx);
}
span {
	font-size: 28rpx;
}
.order-container {
	margin-top: 20rpx;
	.red_color {
		color: #d01900;
	}
	.green_color {
		color: #009088;
	}
	.order-header {
		border-radius: 12rpx;
	}
	.order-body {
		margin-top: 20rpx;
		margin-bottom: 40rpx;
		.order-item-header {
			display: flex;
			// justify-content: space-between;
			align-items: center;
			height: 96rpx;
			line-height: 96rpx;
			padding: 0 40rpx;
			border-top-left-radius: 12rpx;
			border-top-right-radius: 12rpx;
			color: #fff;
			position: relative;
			label {
				font-weight: normal;
			}
			span {
				margin-right: 60rpx;
			}
			.order-item-header-messages {
				font-size: 28rpx;
				letter-spacing: 1.2rpx;
				b {
					font-weight: 500;
				}
				height: 96rpx;
				overflow: hidden;
				span {
					a {
						color: #d01900;
					}
				}
			}
			.order-item-header-buttons {
				width: 720rpx;
				height: 96rpx;
				position: absolute;
				right: 40rpx;
				display: flex;
				justify-content: flex-end;
				align-self: center;
				align-items: center;
			}
		}
		.order-item-body {
			span {
				border-bottom: 2rpx solid #e0e4e8;
				height: 108rpx;
				padding: 0 40rpx;
			}
		}
		.order-item-body:last-of-type {
			span:first-of-type {
				border-bottom-left-radius: 16rpx;
			}
			span:last-of-type {
				border-bottom-right-radius: 16rpx;
			}
		}
	}

	.table-layout {
		display: flex;
		justify-content: space-around;
		align-items: center;
		background-color: #fff;
		// padding: 12px 12px;
		min-height: 96rpx;
		line-height: 96rpx;
		color: #001124;
		font-size: 32rpx;
		span:first-of-type {
			border-left: 2rpx solid #e0e4e8;
		}
		span {
			border-right: 2rpx solid #e0e4e8;
			display: inline-block;
			width: calc(100% / 8);
			text-align: center;
			text-overflow: ellipsis;
			overflow: hidden;
			white-space: nowrap;
			// &:last-child {
			//   border-right: none;
			// }
		}
	}
	.table-layout-title {
		background-color: #eaedf0;
		span:first-of-type {
			border-left: 0;
		}
		span {
			&:last-child {
				border-right: none;
			}
		}
	}
	.searchmore {
		border: none;
	}
}
.searchMore {
	border: none !important;
}
::v-deep .el-button.el-button--mini {
	width: 84rpx;
	height: 44rpx;
	line-height: 40rpx;
	padding: 0;
	background: #dcfcff;
	color: #4aaab3;
}
.noData {
	position: relative;
	top: -320rpx;
	text-align: center;
	font-size: 32rpx;
	font-weight: 600;
	color: #999;
}
.user_unset {
	user-select: none;
}
::v-deep .el-form-item {
	margin-bottom: 10rpx;
}
</style>
